import React, { Component } from 'react';
import './index-section.scss';
import { Route, Switch, Redirect, Link } from 'react-router-dom';
import Subscribey from './child/subscribey';
import Android from './child/android';
import Frontend from './child/frontend';
import Ios from './child/ios';
import Design from './child/design';
import Freebie from './child/freebie';
import Article from './child/article';
import Ai from './child/ai';
import Devops from './child/devops';
import Backend from './child/backend';
import Product from './child/product';

class Com extends Component  {
  constructor (props) {
      super(props)
      this.state={}
      console.log(props)
  }
pinbtn () {
    document.querySelector('.sendtext').style.display="block";
}
out () {
    document.querySelector('.sendtext').style.display="none";
}

goBook = () => {  
    this.props.history.push('/book');
}

    render () {
        return (
            <div className="index-section">
                <div className='index-left-section'>
                    <div className="user-action-nav">
                        <div className='user-img'>
                            <i className='iconfont icon-yonghu'></i>
                        </div>
                        <div className='user-nav-list'>
                            <ul>
                                <li>
                                    <i className='iconfont icon-zhifeiji'></i>
                                    <span className='Fclick' onClick={ this.pinbtn.bind(this)}>
                                        发沸点
                                    </span>
                                </li>
                                <li>
                                    <i className='iconfont icon-xie'></i>
                                    <span><Link to="/subscribed">写文章</Link></span>
                                </li>
                                <li>
                                    <i className='iconfont icon-fenxianglianjie'></i>
                                    <span><Link to="/newentry">分享连接</Link></span>
                                </li>
                            </ul>
                        </div>
                        <div className='index-draft'>草稿</div>
                    </div>
                    <div className='timeline-entry-list'>
                        <div className='list-header'>
                            <ul className='list-header-left'>
                                <li>热门</li>
                                <li>最新</li>
                                <li>评论</li>
                            </ul>
                            <ul className='list-header-right'>
                                <li>本周最热<i className='iconfont icon-dian'></i></li>
                                <li>本月最热<i className='iconfont icon-dian'></i></li>
                                <li>历史最热</li>
                            </ul>
                        </div>
                        <Switch>
                            <Route path="/android" component = { Android } />
                            <Route path="/frontend" component = { Frontend } />
                            <Route path="/ios" component = { Ios } />
                            <Route path="/backend" component = { Backend } />
                            <Route path="/design" component = { Design } />
                            <Route path="/product" component = { Product } />
                            <Route path="/freebie" component = { Freebie } />
                            <Route path="/article" component = { Article } />
                            <Route path="/ai" component = { Ai } />
                            <Route path="/devops" component = { Devops } />
                            <Route path="/subscribey" component = { Subscribey } />
                            <Redirect from='/' to="/nologin" />
                        </Switch>
                    </div>
                </div>
                <div className='index-right-section'>
                    <div className='block-body'>
                        <img src="https://b-gold-cdn.xitu.io/v3/static/img/timeline.e011f09.png" alt=""/>
                        <span>下载掘金客户端</span>
                        <span>一个帮助开发者成长的社区</span>
                    </div>
                    <div className='juejin-books'>
                      
                        <div className='books-header' > 
                        <Link to='/book/child/default'>
                            <span className='title'>掘金小册</span>
                            <i className='iconfont icon-fanhui'></i>
                            <i className='iconfont icon-gengduo'></i> </Link>
                        </div>
                        <Link to='/book/child/default/detail'>
                        <figure className='books'>
                            <img src="https://user-gold-cdn.xitu.io/2017/11/20/15fd79417e955d9a?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1" alt=""/>
                            <figcaption>
                                <span>数字货币与区块链原理</span>
                                <div><span>新人价￥14.95</span><span>￥29.9</span></div>
                            </figcaption>
                        </figure>
                        <figure className='books'>
                            <img src="https://user-gold-cdn.xitu.io/2017/11/20/15fd79417e955d9a?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1" alt=""/>
                            <figcaption>
                                <span>数字货币与区块链原理</span>
                                <div><span>新人价￥14.95</span><span>￥29.9</span></div>
                            </figcaption>
                        </figure>
                        </Link>
                        <span className='newuser-title'>
                            <span>新人专享好礼</span>
                            <div className='fengefu'></div>
                        </span>
                        <figure className='giftbag'>
                            <img src="https://b-gold-cdn.xitu.io/v3/static/img/45.b99ea03.svg" alt=""/>
                            <figcaption>
                                <div><span>送你</span><span>45元</span><span>买小册</span></div>
                                <div>立即领取</div>
                            </figcaption>
                        </figure>
                    </div>
                    <Link to='user/dynamic'>
                    <div className='sidebar-user'>
                        <div className='sidebar-user-title'>
                            <span className='title'>你可能感兴趣的人</span>
                        </div>
                        <div className='user'>
                            <i className='iconfont icon-yonghu'></i>
                            <span>
                                <span>Xmy</span>
                                <span className='litter-size'>设计爱好者</span>
                            </span>
                        </div>
                        <div className='user'>
                            <i className='iconfont icon-yonghu'></i>
                            <span>
                                <span>Xmy</span>
                                <span className='litter-size'>设计爱好者</span>
                            </span>
                        </div>
                        <div className='user'>
                            <i className='iconfont icon-yonghu'></i>
                            <span>
                                <span>Xmy</span>
                                <span className='litter-size'>设计爱好者</span>
                            </span>
                        </div>
                        <div className='user'>
                            <i className='iconfont icon-yonghu'></i>
                            <span>
                                <span>Xmy</span>
                                <span className='litter-size'>设计爱好者</span>
                            </span>
                        </div>
                    </div></Link>
                    <div className='sidebar-block'>
                        <ul>
                            <li>
                                <img src="https://b-gold-cdn.xitu.io/v3/static/img/repos.28d0802.png" alt=""/>
                                <span>开源库</span>
                            </li>
                            <li>
                            <img src="https://b-gold-cdn.xitu.io/v3/static/img/collections.945b9ae.png" alt=""/>
                                <span>收藏集</span>
                            </li>
                            <li>
                            <img src="https://b-gold-cdn.xitu.io/v3/static/img/juejin-extension-icon.4b79fb4.png" alt=""/>
                                <span>下载掘金浏览器插件</span>
                            </li>
                            <li>
                            <img src="https://b-gold-cdn.xitu.io/v3/static/img/juejin-miner.b78347c.png" alt=""/>
                                <span>前往掘金翻译计划</span>
                            </li>
                            <li>
                            <img src="https://b-gold-cdn.xitu.io/v3/static/img/juejin-partner.4dd2d8c.png" alt=""/>
                                <span>商务合作</span>
                            </li>
                        </ul>
                    </div>
                    <div className='sidebar-block-txt'>
                        <ul>
                            <li>
                                <p>
                                    <span>关于</span><i className='iconfont icon-dian'></i>
                                    <span>掘金基本法</span><i className='iconfont icon-dian'></i>
                                    <span>建议反馈</span><i className='iconfont icon-dian'></i>
                                    <span>加入我们</span>
                                </p>
                            </li>
                            <li><p><span>商务合作</span><i className='iconfont icon-dian'></i><span>友情链接</span><i className='iconfont icon-dian'></i><span>专栏介绍</span></p></li>
                            <li><span>津ICP备15003202号-2</span></li>
                            <li><span>京公网安备11010802026719号</span></li>
                            <li><span>?2019 掘金</span></li>
                        </ul>
                    </div>

                </div>
                <div className='sendtext'>
                    <div className='sendtxt'>
                        <i className='iconfont icon-x-copy' onClick={ this.out.bind(this) }></i>
                        <div className='txt-title'>
                            <span>发沸点</span>
                        </div>
                        <div className='txt' >
                        <div className='txt-cont' contentEditable="true" spellCheck="false" placeholder="发布动态...">
                        </div>
                        </div>
                        <div className='toolbar-ico'>
                            <ul>
                                <li><i className='iconfont icon-biaoqing'></i><span>表情</span></li>
                                <li><i className='iconfont icon-tupian'></i><span>图片</span></li>
                                <li><i className='iconfont icon-lianjie'></i><span>连接</span></li>
                                <li><i className='iconfont icon-huati'></i><span>话题</span></li>
                            </ul>
                            <button className='publish'>发布</button>
                        </div>
                        
                    </div>
                </div>
            </div>
        )
    }
}

export default Com;